@charset "UTF-8";

@media(min-width:870px){
    #nav-content .n-order a{ height: 50px; border-bottom: 15px solid #1d2878; }
}
@media(max-width:870px){
    #nav-content .n-order a{ color: #e70113;}
}
/*	order
----------------------------------------------------------------------------- */
.section-cont		{ margin-bottom: 50px; }
.section-cont span	{ font-weight: bold; }

/* title */
.section-cont h1        { height: 50px; font-size: 20px; line-height: 50px; padding: 0 10px; margin-bottom: 20px; background-color: #1d2389; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; }
.section-cont h2	{ height: 30px; background: url('../images/common/subtitle-cont-bg.gif') repeat-y left; margin-bottom: 20px; color: #557990; font-size: 14px; line-height: 30px; padding-left: 15px; }

/* order */
.section-cont table.order						{ width: 100%; background: #333; }
.section-cont table.order th,
.section-cont table.order td					{ padding: 5px 10px; }
.section-cont table.order th					{ width: 30%; background: #555; color: #fff; text-align: left; vertical-align: top; }
.section-cont table.order th span				{ font-weight: normal; display: block; }
.section-cont table.order td					{ background: #fff; }
.section-cont table.order td span.number		{ color: #cc0000; font-size: 16px; font-weight: bold; }
.section-cont table.order td a.number		{ color: #cc0000; font-size: 16px; font-weight: bold; }
.section-cont table.order td dl					{ border: 1px solid #ccc; padding: 5px 10px 10px; }
.section-cont table.order td dl dt				{ padding-top: 10px; font-weight: bold; }
.section-cont table.order td dl dt span.note	{ font-weight: normal; }
.section-cont table.order td dl ol,
.section-cont table.order td dl ul				{ margin-left: 2em; }


/* format-dl */
.format-dl { background: #deeff9; margin-bottom: 20px; padding: 10px; }
.format-dl a { background: url('../images/common/arrow-cont-right.gif') no-repeat 0 7px; padding-left: 10px; font-weight: bold; display: block; }

/* supplement */
ul.supplement            { list-style-type: none; }
.order-radio             { display: flex; }
.order-form p            { font-weight: bold; }
select                   { background-image: linear-gradient(to top,#eee,#fff ); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border: 1px solid #ccc; }
select:focus             { box-shadow: 0 0 5px #e70113; outline: 1px #e70113; }
input                    { font-family:Arial, Helvetica, sans-serif; }
textarea                 { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border: 1px solid #ccc; font-family:Arial, Helvetica, sans-serif; }
textarea:focus           { box-shadow: 0 0 5px #e70113; outline: 1px #e70113;}
.address-flex span       { font-weight: normal; }
input[type="radio"]      { margin: 5px 10px;}
input::placeholder       { color: #ccc; }
textarea::placeholder    { color:#ccc; }
input:-moz-placeholder   { color: #ccc; }
textarea:-moz-placeholder  { color: #ccc; }
input:-ms-input-placeholder{ color: #ccc; }
textarea:-ms-input-placeholder  { color: #ccc; }
input::-webkit-input-placeholder{ color: #ccc; }
textarea::-webkit-input-placeholder{ color: #ccc; }
input[type="text"]       { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -ms-border-radius: 3px; border: 1px solid #ccc; }
input[type="text"]:focus { box-shadow: 0 0 5px #e70113; -moz-box-shadow :0 0 5px #e70113; -ms-box-shadow: 0 0 5px #e70113; -webkit-box-shadow: 0 0 5px #e70113; outline: 1px #e70113; }
input[type="submit"]     { background: #e70113 ; color: #fff; text-align: center; font-size: 18px; font-weight: bold; border: none; border-radius: 3px;-moz-border-radius:3px; -webkit-border-radius:3px; -webkit-appearance:none; }
@media(min-width:1700px){
    .section-cont        { width: 870px; margin: 40px 280px 50px 140px; } 
    .section-cont table.order{ font-size:13px; }
    .order-form          { width: 870px; margin: 30px 0; }    
    .oreder-form p       { font-size: 17px; }
    .order-div           { width: 870px; display: flex; margin: 30px 0; } 
    input[type="text"]   { width: 690px; height: 35px; padding: 0 10px; margin: 0 10px; font-size:15px; }
    .order-radio         {  margin: 0 10px; }
    .order-div p         { width: 140px; margin: 0 10px; line-height: 35px; }
    select               { width: 690px; height: 35px; margin: 0 10px;  padding: 0 10px; font-size: 15px; }
    .address-div         { line-height: 35px; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap:wrap; }
    .address-flex        { width: 690px; margin: 0 10px; font-size: 15px; }
    .address-flex span   { font-size: 13px; }
    #digit-3             { width: 100px; font-size: 15px; margin: 5px 2.5px; }
    #digit-4             { width: 150px; font-size: 15px; margin: 5px 2.5px; }
    #address1            { width: 200px; font-size: 15px; margin: 5px 2.5px; }
    #address2            { width: 435px; font-size: 15px; margin: 5px 0 5px 2.5px; }
    #address3            { width: 690px; font-size: 15px; margin: 5px 2.5px; }
    textarea             { width: 690px; height: 150px; margin: 0 10px; font-size: 15px;  padding: 10px; }
    input[type="submit"] { width: 250px; height: 40px; margin: 20px 0; font-size: 17px; -webkit-appearance:none; }
}
@media(max-width:1700px){
    .section-cont       { width: 870px; margin: 40px 0 0 40px; } 
    .section-cont table.order{ font-size:13px; }
    .order-form         { width: 870px; margin: 30px 0; }    
    .oreder-form p      { font-size: 17px; }
    .order-radio        { margin: 0 10px; }
    .order-div          { width: 870px; display: flex; margin: 20px 0; } 
    input[type="text"]  { width: 690px; height: 35px; padding: 0 10px; margin: 0 10px; font-size:15px; }
    .order-div p        { width: 140px; margin: 0 10px; line-height: 35px; }
    select              { width: 690px; height: 35px; margin: 0 10px;  padding: 5px 10px; font-size: 15px; }
    .address-div        { line-height: 35px; display: flex; flex-wrap: wrap; }
    .address-flex       { width: 690px; margin: 0 10px; font-size: 15px; }
    .address-flex span  { font-size: 13px; }
    #digit-3            { width: 100px; font-size: 15px; margin: 5px 2.5px; }
    #digit-4            { width: 150px; font-size: 15px; margin: 5px 2.5px; }
    #address1           { width: 200px; font-size: 15px; margin: 5px 2.5px; }
    #address2           { width: 435px; font-size: 15px; margin: 5px 2.5px; }
    #address3           { width: 690px; font-size: 15px; margin: 5px 2.5px; }
    textarea            { width: 690px; height: 150px; margin: 5px 10px; font-size: 15px;  padding: 10px; }
    input[type="submit"]{ width: 250px; height: 40px; margin: 20px 0; font-size: 17px;}
}
@media(max-width:1220px){
    .section-cont       { width: 640px; margin: 40px 0 0 40px; }  
    .section-cont table.order{ font-size:13px; }
    .order-form         { width: 640px; margin: 30px 0; }    
    .oreder-form p      { font-size: 17px; }
    .order-div          { width: 640px; display: flex; flex-wrap: wrap; margin: 10px 0; } 
    input[type="text"]  { width: 640px; height: 35px; padding: 0 10px; margin: 0 10px; font-size:15px; }
    .order-div p        { margin: 0 10px; line-height: 35px; }
    select              { width: 640px; height: 35px; margin: 0 10px;  padding: 5px 10px; font-size: 15px; }
    .address-div        { line-height: 35px; display: flex; flex-wrap: wrap; }
    .address-flex       { width: 620px; margin: 0 10px; font-size: 15px; }
    .address-flex span  { font-size: 13px; }
    #digit-3            { width: 100px; font-size: 15px; margin: 5px 2.5px; }
    #digit-4            { width: 150px; font-size: 15px; margin: 5px 2.5px; }
    #address1           { width: 165px; font-size: 15px; margin: 5px 2.5px; }
    #address2           { width: 400px; font-size: 15px; margin: 5px 2.5px; }
    #address3           { width: 620px; font-size: 15px; margin: 5px 2.5px; }
    textarea            { width: 620px; height: 150px; margin: 5px 10px; font-size: 15px;  padding: 10px; }
    input[type="submit"]{ width: 250px; height: 40px; margin: 20px 0; font-size: 17px; }

}
@media(max-width:640px){
    .section-cont       { width: 100%; margin: 40px 0 ; }   
    .section-cont table.order { font-size:2.2vw; }
    .order-form         { width: 100%; margin: 30px 0; }    
    .oreder-form p      { font-size: 2.5vw; }
    .order-div          { width: 100%;  display: flex; flex-wrap: wrap; margin: 2% 0; } 
    input[type="text"]  { width: 100%; height: 30px; padding: 0 10px; margin: 0 5px; font-size:2.5vw; }
    .order-div p        { margin: 0 2%; }
    select              { width: 100%; height: 30px; padding: 5px; font-size: 2.2vw; }
    .address-div        { line-height: 30px; display: flex; flex-wrap: wrap; }
    .address-flex       { width: 100%; margin: 0 10px; font-size: 13px; }
    .address-flex span  { width: 55%; font-size: 2vw; }
    #digit-3            { width: 15%; font-size: 2.2vw; margin: 1px; }
    #digit-4            { width: 20%; font-size: 2.2vw; margin: 1px; }
    #address1           { width: 30%; font-size: 2.2vw; margin: 1px; }
    #address2           { width: 40%; font-size: 2.2vw; margin: 1px; }
    #address3           { width: 100%; font-size: 2.2vw; margin:  1px; }
    textarea            { width: 100%; height: 120px; margin: 5px; font-size: 13px; padding: 10px; }
    input[type="submit"]{ width: 100%; height: 35px; margin: 10px 0; font-size: 3VW; }
}